<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 200px;height: 200px;background-color: red;margin: 30px;overflow: hidden;}
    .box span{display: block; margin: 30px;background: yellow;height: 50px;}
  </style>
</head>
<body style="height: 1000px;">
  <h2>212</h2>
  <div class="box">
    <span></span>
  </div>
</body>
<script>
  var box = document.querySelector(".box")

  box.onmousedown = function( eve ){
    // 事件对象的兼容处理
    var e = eve || window.event;

    // 鼠标相对于当前触发事件的元素的坐标
    // console.log( e.offsetX, e.offsetY );

    // 鼠标相对于页面可视区域的坐标
    // console.log( e.clientX, e.clientY );

    // 鼠标相对于页面的坐标
    // console.log( e.pageX, e.pageY );

    // 鼠标相对于显示器的坐标
    // console.log( e.screenX, e.screenY );

    // 获取当前鼠标的按键：0左，2右
    // console.log( e.button );
    // 获取当前鼠标的按键：1左，2右
    // console.log( e.buttons );

    // 事件类型
    // console.log( e.type );

    // 事件目标：触发事件的元素
    // console.log( e.target );
    // console.log( e.srcElement );
    // 事件目标的兼容处理
    var target = e.target || e.srcElement;
    console.log(target);
  }


  
</script>
</html>